import React from 'react'
// 引入css
import obj from './css/Login.module.scss'
// 引入antd中所需要的组件
import { Button, Card, Form, Input, message } from 'antd'
// 引入图标字体
import {UserOutlined,LockOutlined } from '@ant-design/icons'
// 引入跳转的hooks
import { useNavigate } from 'react-router-dom'
import { loginAPI } from '../service/auth'
import { setToken } from '../utils/tools'



function Login() {
  // 调用跳转的hooks
  const navigate = useNavigate()
  return (
    <div className={obj.box}>
      <div className={obj.login}>
        <Card
         title="天府新区医院后台"
         style={{width: 420,height: 480, marginLeft: 520, marginTop: 80}}
        >
          <Form
           //点击提交按钮，会触发form中的事件
           onFinish={async (v) => {
              // 参数v表示获取到的参数值
              console.log(v)
              //请求接口
              const res = await loginAPI(v)
              console.log(res);
              //如果登录成功
              if(res.code = 200){
                // 提示消息
                //设置token
                setToken(res.token)
                message.success('登录成功')
                // 编程式跳转
                navigate('/admin')
            }else{
              message.error('登陆失败')
            }
            
           }}
          >
            {/* 给表单控件设置参数名 */}
            <Form.Item
             name='uname'
             rules={[
              // 设置校验
              // 进行非空的验证
              {
                required: true, //开启
                message: '用户名不能为空'  //提示信息
              }
             ]}
            >
              <Input placeholder='请输入用户名' size='large' prefix={<UserOutlined/>} />
            </Form.Item>
            <Form.Item
             name='upwd'
             rules={[
              {
                required: true,
                message: '密码不能为空'
              }
             ]}
            >
              <Input type='password' placeholder='请输入密码' size='large' prefix={<LockOutlined />} />
            </Form.Item>
            <Form.Item>
              {/* 在按钮指定为这是一个提交按钮 */}
              <Button type='primary' htmlType='submit' block  size='large'>登录</Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    </div>
  )
}

export default Login